<template>
  <div class="login-page">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="login-title">电商管理系统</span>
      </div>
      <div class="login-form">
        <el-form :model="form" :rules="loginRules" ref="loginForm">
          <el-form-item prop="name">
            <el-input
              type="text"
              v-model="form.name"
              auto-complete="off"
              placeholder="请输入用户名"
            >
              <template slot="prepend"
                ><i style="font-size: 20px" class="el-icon-user"></i
              ></template>
            </el-input>
          </el-form-item>
          <el-form-item prop="userpwd">
            <el-input
              type="text"
              v-model="form.userpwd"
              auto-complete="off"
              placeholder="请输入密码"
              show-password
            >
              <template slot="prepend"
                ><i style="font-size: 20px" class="el-icon-key"></i
              ></template>
            </el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="width: 100%"
              type="primary"
              @click="handleLogin"
              :loading="loading"
              >登录</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  // name: "Login",
  data() {
    return {
      loading: false,
      form: {
        name: "",
        userpwd: "",
      },
      loginRules: {
        name: [{ required: true, message: "请输入账户", trigger: "blur" }],
        userpwd: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  methods: {
    handleLogin() {
      //this.userId = "";
      this.$refs.loginForm.validate().then(() => {
        this.loading = true;
        //模拟异步请求后台接口 登录操作
        setTimeout(() => {
          this.axios
            .post("http://localhost:15670/api/RoleUser/GetLongin", {
              UserName: this.form.name,
              Password: this.form.userpwd,
            })
            .then((res) => {
              if (res.data) {
                this.$message.success("登录成功！");
                // 登录成功，写JWT的 token到本地
                window.localStorage.setItem("token", res.data.token);
                // 数据提交后端要加入新的Token值
                this.axios.defaults.headers.common["Authorization"] =
                  "Bearer " + res.data.token;

                sessionStorage.userId = res.data.user.Data;

                this.$router.push("/treeshow");
              } else {
                this.$message.error("登录失败");
              }
            });
          this.loading = false;
        }, 1000);
      });
    },
  },
  created() {},
};
</script>

<style scoped>
.login-page {
  background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%);
  height: 120vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-title {
  font-size: 30px;
}

.box-card {
  width: 400px;
}
</style>
